import SvgIcon from "@/components/SvgIcon/index";
import { useAppStore } from "@/store/modules/app";
import { useI18n } from "vue-i18n";
import "./index.scss";
export default defineComponent({
  props: {
    id: {
      type: String,
      default: "",
    },
    class: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    const appStore = useAppStore();
    const { locale } = useI18n();

    const message: any = {
      zh_CN: "切换语言成功！",
      en_US: "Switch Language Successful!",
    };
    const handleLanguageChange = (lang: string) => {
      locale.value = lang;
      appStore.changeLanguage(lang);
      ElMessage.success(message[lang] || "切换语言成功！");
    };
    return () => (
      <>
        <el-dropdown trigger="click" onCommand={handleLanguageChange}>
          {{
            default: () => (
              <div class="lang-select--style">
                <SvgIcon iconClass="language" />
              </div>
            ),
            dropdown: () => (
              <el-dropdown-menu>
                <el-dropdown-item
                  disabled={appStore.language === "zh_CN"}
                  command="zh_CN"
                >
                  中文
                </el-dropdown-item>
                <el-dropdown-item
                  disabled={appStore.language === "en_US"}
                  command="en_US"
                >
                  English
                </el-dropdown-item>
              </el-dropdown-menu>
            ),
          }}
        </el-dropdown>
      </>
    );
  },
});
